<!--
@file：固定资产管理-资产清查
@time：2019-09-24
@author：chenj
-->
<template>
    <div class="check-wrapper">
        <div class="page-header">
            <div class="clearfix title-box">
                <span class="fl fz20">资产清查</span>
                <div class="fr clearfix icon-box">
                    <img class="mr20 fl cursor_p" :src="hoverIndex != index ? img.icon : img.iconActive"
                         v-for="(img, index) in imgList" :key="img.id" @mouseenter="mouseEnter(index)"
                         @mouseleave="mouseLeave(-1)" @click="iconClick(img.id)">
                </div>
            </div>
            <div class="nav-box">
                <div class="nav-list pl20">
                    <span class="nav-item cursor_p fz16" v-for="(item, index) in navList" :key="item.id"
                          :class="currentNav == index ? 'active-nav' : ''"
                          @click="switchNav(index)">{{item.name}}</span>
                </div>
            </div>
        </div>
        <!--资产类型-->
        <div class="check-content p20 clearfix w1200" v-if="!currentNav">
            <div class="fl">
                <p class="hardware">硬件资产({{assetType.hardwareAssets.length}})</p>
                <ul>
                    <li v-for="item in assetType.hardwareAssets" :key="item.id">{{item.name}}</li>
                </ul>
            </div>
            <div class="fl">
                <p class="software">软件资产({{assetType.softwareAssets.length}})</p>
                <ul>
                    <li v-for="item in assetType.softwareAssets" :key="item.id">{{item.name}}</li>
                </ul>
            </div>
            <div class="fl">
                <p class="data">数据资产({{assetType.dataAssets.length}})</p>
                <ul>
                    <li v-for="item in assetType.dataAssets" :key="item.id">{{item.name}}</li>
                </ul>
            </div>
        </div>
        <!--资产类别-->
        <div class="check-content p20 clearfix" v-if="currentNav==1">
            <div class="fl">
                <p class="hardware">笔记本({{assetClass.notebook.length}})</p>
                <ul>
                    <li v-for="item in assetClass.notebook" :key="item.id">{{item.name}}</li>
                </ul>
            </div>
            <div class="fl">
                <p class="software">手机({{assetClass.mobilePhone.length}})</p>
                <ul>
                    <li v-for="item in assetClass.mobilePhone" :key="item.id">{{item.name}}</li>
                </ul>
            </div>
            <div class="fl">
                <p class="data">汽车({{assetClass.car.length}})</p>
                <ul>
                    <li v-for="item in assetClass.car" :key="item.id">{{item.name}}</li>
                </ul>
            </div>
        </div>
        <!--资产状态-->
        <div class="check-content p20 clearfix asset-status" v-if="currentNav==2">
            <div class="fl">
                <p class="hardware">在库({{assetStatus.inLibrary.length}})</p>
                <ul>
                    <li v-for="item in assetStatus.inLibrary" :key="item.id">
                        <span>{{item.name}}</span><br>
                        <span class="type" :class="item.type=='硬件资产'?'hardware':'software'">{{item.type}}</span>
                    </li>
                </ul>
            </div>

            <div class="fl">
                <p class="software">已领用({{assetStatus.alreadyUsed.length}})</p>
                <ul>
                    <li v-for="item in assetStatus.alreadyUsed" :key="item.id">
                        <span>{{item.name}}</span><br>
                        <span class="type" :class="item.type=='硬件资产'?'hardware':'software'">{{item.type}}</span>
                    </li>
                </ul>
            </div>
            <div class="fl">
                <p class="data">外借({{assetStatus.borrowFrom.length}})</p>
                <ul>
                    <li v-for="item in assetStatus.borrowFrom" :key="item.id">
                        <span>{{item.name}}</span><br>
                        <span class="type" :class="item.type=='硬件资产'?'hardware':'software'">{{item.type}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!--统计抽屉-->
        <div class="statistics-box">
            <el-drawer class="statistics-drawer" title="统计" size="600" :visible.sync="drawer">
                <div id="category" ref="category" style="width: 450px;height:240px;">
                    <div>新增资产</div>
                    <div class="range">范围：每月</div>
                    <div class="content">
                        <p class="record-num">记录数量</p>
                        <span>6</span>
                        <p class="line">--</p>
                    </div>
                </div>
                <div class="margin-line"></div>
                <div id="newRecord" class="mb20" ref="newRecord" style="width: 450px;height:380px;"></div>
            </el-drawer>
        </div>
    </div>
</template>

<script src="./check.js"></script>

<style scoped lang="scss">
    @import "check";
</style>
